<template>
	<view class="content with-tabbar">


		<div class="flex align-end mb-20">
			<div class="fontS32 font-bold mr-5">选择关键词</div>
			<div>最多选择5个，将突出展示给牛人</div>
		</div>
		<scroll-view class="" style="white-space: normal;max-height: 400upx;" scroll-y>
			<div class="advBox">
				<div class="flex-center advItem" :class="item.check ? 'cur' : ''"
					v-for="(item, index) in ProfessionList" :key="index" @click="selectKey(item)">
					<div class="name fontE1">{{ item.name }}</div>
					<!-- <div class="iconfont icon-close1 ml-6"></div> -->
				</div>
			</div>
		</scroll-view>
		<!-- 已选择 -->
		<div class="fontS32 font-bold mb-20 mt-20">已选择</div>
		<div>
			<div class="advBox1">
				<div class="flex-center advItem1" v-for="(item, index) in selectList" :key="index"
					@click.stop="deleteKey(item, index, 'select')">
					<div class="name fontE1">{{ item.name }}</div>
					<div class="iconfont icon-close1 pl-10"></div>
				</div>
			</div>
		</div>
		<!-- 自定义 -->
		<div class="fontS32 font-bold mb-20">自定义</div>
		<scroll-view class="" style="white-space: normal;max-height: 400upx;" scroll-y>
			<div class="advBox1">
				<div class="flex-center advItem2" :class="item.check ? 'advItem1' : ''"
					v-for="(item, index) in selfList" :key="index" @click="selectKey(item, index)">
					<div class="name fontE1">{{ item.name }}</div>
					<div class="iconfont icon-close1 pl-10" @click.stop="deleteKey(item, index, 'delete')"></div>
				</div>
				<div @click="addAdv" class="advItem1"><span class="iconfont icon-jia mr-4"></span>自定义</div>
			</div>

		</scroll-view>
		<!-- <div v-if="advShow" class="advModal"></div>
		<div v-if="advShow" class="advCover">
			<input type="text" v-model="advForm.name" placeholder="请输入关键字">
		</div> -->

		<div class="bottom">
			<div class="submitBtn fontS26" @click="toNext">保存
			</div>


		</div>



	</view>
</template>

<script>
import { positionKey, savePositionKey, delPositionKey } from '@/api/resume'
const api = require("@/api/api.js").api;
export default {
	computed: {
		userInfo() {
			console.log(this.$store.getters.userInfo)
			return this.$store.getters.userInfo || {};
		},
	},
	data() {
		return {
			advForm: {
				name: '',
				professionId: ''
			},
			ProfessionList: [],
			selectList: [],
			professionIndex: 0,
			professionStatus: false,
			selfList: [],
			advShow: true
		}
	},
	onLoad(options) {
		this.advForm.professionId = options.professionId
		this.getPositionKey()

	},
	methods: {
		async getPositionKey() {
			this.ProfessionList = []
			this.selfList = []
			const { data } = await positionKey({ professionId: this.advForm.professionId })
			data.forEach(item => {
				item.check = false
				if (item.id.toString().slice(0, 2) === '11') {
					this.ProfessionList.push(item)
				} else {
					this.selfList.push(item)
				}
			})
			// this.ProfessionList = data
		},

		async selectKey(item) {
			const { selectList } = this;

			if (!item.check && selectList.length < 5) {
				item.check = !item.check
			} else if (item.check) {
				console.log('3434343')
				item.check = !item.check


			} else {
				console.log('wewewew')
				uni.showToast({
					title: '最多选择5个',
					icon: 'none'
				})
			}
			this.selectList = []
			this.ProfessionList.forEach(item => {
				if (item.check) {
					this.selectList.push(item)
				}
			})
			this.selfList.forEach(item => {
				if (item.check) {
					this.selectList.push(item)
				}
			})


		},
		async deleteKey(item, index, type) {
			item.check = false
			if (type === 'select') {
				this.selectList.splice(index, 1)
			}
			if (type === 'delete') {
				const { data } = await delPositionKey(item.id)
				this.selectList.forEach((items, i) => {
					if (item.id === items.id) {
						this.selectList.splice(i, 1)
					}
				})
				this.selfList.forEach((items, i) => {
					if (items.id === item.id) {
						this.selfList.splice(i, 1)
					}
				})
				// await this.getPositionKey()

			}
		},
		async addAdv() {
			let _this = this;
			uni.showModal({
				title: '输入职位关键词，不超过10个字',
				content: '',
				placeholderText: '请输入关键词',
				editable: true,
				maxLength: 10,
				confirmColor: '#37AF71',
				confirmText: '确定',
				cancelText: '取消',
				success: async function (res) {
					if (res.confirm) {
						// console.log(res.content)
						_this.advForm.name = res.content
						const { data } = await savePositionKey(_this.advForm)
						await _this.getPositionKey()
						_this.advForm.name = ''
					} else if (res.cancel) {

					}
				}
			});
			// 
		},
		async toNext() {
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let nowPage = pages[pages.length - 1]; //当前页页面实例
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			prevPage.$vm.postForm.careerAdvantages = this.selectList.map(item => item.name).join(',')
			uni.navigateBack({
				delta: 1
			})

		},

	}
}
</script>

<style lang="less" scoped>
.content {

	padding: 20upx;
	background: #fff;
	// text-align: center;
	// height: 100vh;
	// overflow: hidden;
}

.advBox1 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.advItem2 {
		background: #f7f8f7;
		padding: 16upx 10upx;
		justify-content: center;
		align-items: center;
		margin-bottom: 20upx;
		border: 1px solid #f7f8f7;
		margin-right: 20upx;
	}

	.advItem1 {
		margin-right: 20upx;
		padding: 16upx 10upx;
		border: 1px solid #34AC6E;
		background: #E9F8F0;
		color: #34AC6E;
		margin-bottom: 20upx;


	}
}

.advBox {
	overflow: hidden;

	.advItem {
		float: left;
		width: 32%;
		background: #f7f8f7;
		padding: 16upx 10upx;
		justify-content: center;
		align-items: center;
		margin-right: 2%;
		margin-bottom: 20upx;
		border: 1px solid #f7f8f7;

		&.cur {
			border: 1px solid #34AC6E;
			background: #E9F8F0;
			color: #34AC6E;

		}

		.name {
			// width: calc(100% - 30upx);

		}

		&:nth-child(3n) {
			margin-right: 0 !important;
		}
	}
}

.advModal {
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, .2);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;

}

.advPos {
	width: 80%;
	height: ;
}

.color-0d0 {
	color: #0D0D12;
}
</style>